import { PageHeader, Layout, Menu } from 'antd';
import React, { useState } from 'react';
import {
  MinusOutlined,
  CopyOutlined,
  CloseOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  LaptopOutlined,
  PlusCircleOutlined,
  DashboardOutlined,
  AppstoreOutlined,
  ReadOutlined,
} from '@ant-design/icons';
import styles from './WinMenu.less';
import winEvent from './event.win.jsx';
import { Link } from 'umi';

const { Header, Sider, Content } = Layout;
const getIcon = name => {
  switch (name) {
    case 'addvencher':
      return <PlusCircleOutlined />;
    case 'dashboard':
      return <DashboardOutlined />;
    case 'subject':
      return <ReadOutlined />;
    default:
      return <AppstoreOutlined />;
  }
};
export default props => {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <div className={styles.winmenubox}>
      <div className={styles.candrapdiv}></div>
      <PageHeader
        title={<div className={styles.menutitle}>C</div>}
        style={{ backgroundColor: '#096dd9' }}
        className={styles.menubox}
        extra={[
          <LaptopOutlined
            onClick={winEvent.DevOpen}
            className={styles.menubutton}
            key={'dev-open'}
          />,
          <MinusOutlined
            onClick={winEvent.WinMin}
            className={styles.menubutton}
            key={'icon-min'}
          />,
          <CopyOutlined
            onClick={winEvent.WinMax}
            className={styles.menubutton}
            key={'icon-max'}
          />,
          <CloseOutlined
            onClick={winEvent.WinClose}
            className={styles.menubutton}
            key={'icon-close'}
          />,
        ]}
      ></PageHeader>
      <Layout className={styles.boxmain}>
        <Sider
          trigger={null}
          className={styles.siderbackgroup}
          collapsible
          collapsed={collapsed}
        >
          <Menu mode="inline" defaultSelectedKeys={['router-0']}>
            {props.router.routes.map((value, index) => {
              return (
                <Menu.Item key={'router-' + index} style={{ marginTop: '0px' }}>
                  <Link to={value.path}>
                    {getIcon(value.icon)}
                    <span>{value.name}</span>
                  </Link>
                </Menu.Item>
              );
            })}
          </Menu>
        </Sider>
        <Layout className={styles.sitelayout}>
          <Header
            className={styles.sitelayoutbackground}
            style={{ padding: 0 }}
          >
            {React.createElement(
              collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: styles.changetrigger,
                onClick: () => {
                  setCollapsed(!collapsed);
                },
              },
            )}
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '10px 0',
              padding: 24,
              minHeight: 280,
            }}
          >
            {props.children}
          </Content>
        </Layout>
      </Layout>
    </div>
  );
};
